<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
defineOptions({ name: 'List' })

const router = useRouter()

onMounted(() => {
  console.log('List mounted')
})

function goBack() {
  // 返回上一个历史记录（等同 window.history.back()）
  router.back()
}

function goMinus1() {
  // router.go(-1) 与 router.back 实质上等同
  router.go(-1)
}
</script>

<template>
  <div>
    <h1>List 页面</h1>
    <p>这是一个带“返回”示例页面。</p>
    <button @click="goBack">返回（router.back）</button>
    <button @click="goMinus1">返回（router.go(-1)）</button>

    <ul>
      <li v-for="i in 5" :key="i">
        <router-link :to="{ name: 'detail', params: { id: i } }">去 Detail({{ i }})</router-link>
      </li>
    </ul>
  </div>
</template>
